<template>
  <div class="home-page">
    <transition name="fade">
      <div class="cover-loading" v-if="showLoading">
        <i class="loading-icon" :style="{backgroundImage:`url('${loadingIco}')`}"></i>
      </div>
    </transition>
    <weather-now class="section-panel" />
    <weather-detail class="section-panel" />
    <daily-and-hourly class="section-panel" />
    <life-style class="section-panel" />
    <calendar class="section-panel" v-if="showCalendar" />
    <draw-lots class="section-panel" v-if="showDrawLots" />
    <today-mood class="section-panel" v-if="showTodayMood" />
    <constellation class="section-panel" v-if="showConstellation" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import WeatherNow from './WeatherNow'
import WeatherDetail from './WeatherDetail'
import DailyAndHourly from './DailyAndHourly'
import LifeStyle from './LifeStyle'
import Calendar from './Calendar'
import TodayMood from './TodayMood'
import Constellation from './Constellation'
import DrawLots from './DrawLots'
import loadingIco from '@/assets/icons/home-loading.png'

export default {
  name: 'home-page',
  components: {
    WeatherNow,
    WeatherDetail,
    DailyAndHourly,
    LifeStyle,
    Calendar,
    TodayMood,
    Constellation,
    DrawLots
  },
  computed: {
    ...mapState('Home', [
      'luckLoading',
      'lifeStyleLoading',
      'weatherHourlyLoading',
      'weatherDailyLoading',
      'calendarLoading',
      'weatherNowLoading'
    ]),
    ...mapState('Region', ['cityLoading']),
    ...mapState('Cards', ['cards']),
    showLoading() {
      return (
        !this.ready ||
        this.luckLoading ||
        this.lifeStyleLoading ||
        this.weatherHourlyLoading ||
        this.weatherDailyLoading ||
        this.calendarLoading ||
        this.weatherNowLoading ||
        this.cityLoading
      )
    },
    showCalendar() {
      return this.cards[0].checked
    },
    showDrawLots() {
      return this.cards[1].checked
    },
    showTodayMood() {
      return this.cards[2].checked
    },
    showConstellation() {
      return this.cards[3].checked
    }
  },
  data: () => ({ loadingIco, ready: false }),

  mounted() {
    const t = setTimeout(() => {
      clearTimeout(t)
      this.ready = true
    }, 2000)
  }
}
</script>

<style lang="stylus" scoped>
.section-panel {
  margin-bottom: 20px;
  padding: 16px;
  background-color: #fff;
}

.cover-loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-color: #fff;

  .loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    transform: translate(-50%, -50%);
    background: center / cover no-repeat;
  }
}

.fade-enter-active, .fade-leave-active {
  transition: all 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>
